.img01 {
  /* width是宽度 */
  width: 200px;
}

.img02 {
  /* height是高度 */
  height: 200px;
}

.img03 {
  /* 
    一般来说，图片不会同时设置宽高两个属性
    因为如果同时设置这两个属性，而又不匹配图片的原始高宽比，图片就会被拉伸
    而只设置其中一个的时候，图片会自动匹配原始的高宽比
  */
  width: 200px;
  height: 200px;
}

.box01 {
  /* 
    background-image表示背景图片
    url里面填写背景图片的地址
  */
  background-image: url('./images/img31.jpg');
  /* px是像素，rem是基准字体大小的倍数 */
  width: 16rem;
  height: 9rem;
  /* 
    background-size表示背景图片的大小设置
    cover表示尽可能完整呈现背景图片
  */
  background-size: cover;
}

.bg01 {
  /* background-color是背景色 */
  background-color: #ff0000;
  color: #ffffff;
}

.bg02 {
  background-color: #ff00ff;
  color: #dcdcdc;
  font-size: 2rem;
}
